/** 封装 echarts-图表 常规属性 */
import * as echarts from 'echarts'
const comTitleColor = '#000' // 标题颜色
const comTextColor = '#b6c6e0' // 字体颜色
    // const lowTextColor = '#b6c6e0' // 坐标轴颜色
const commonColor = [
        '#5697fc',
        '#38CFD4',
        '#1faafb',
        '#33F9FF',
        '#33FFBD',
        '#bd487a',
        '#6BFF33',
        '#D1FF33',
        '#7118cc',
        '#B454B1',
        '#3a2d58',
        '#233f87',
        '#5598d9',
        '#52103e',
        '#8568bb',
        '#1058a0',
        '#ffc600',
        '#de5124'
    ]
    //柱状图
export function barEcharts({ echartsData, colors = commonColor,showToolTip = true,showLabel = false, showLegend = false, legendType = 'plain', legendWidth = 'auto', xAxisDatas, axisTickShow = false, rotate = 0, name = '单位：℃', name1 = '', maxVal = 120, minVal = 0, limit = 10, splitNum = 5, barParam = {}, showTitle = false, title = '', itemGap = 10, axisLabelOption = {}, barOption = {},yAxisParam={} }) {
    const seriesData = []
    echartsData.some((item, index) => {
        const param = {
            type: 'bar',
            barWidth: '55%',
            stack: item.stackName ? item.stackName : '', //是否堆叠，相同的stack堆叠
            itemStyle: {
                color: colors[index]
            },
            data: item.data,
            name: item.name,
            ...barParam
        }
        seriesData.push(param)
    })
    const option = {
        tooltip: { //悬浮标签
            show:showToolTip,
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },
            formatter: (params) => {
                var relVal = params[0].name
                for (var i = 0; i < params.length; i++) {
                    let color = params[i].color.colorStops ? params[i].color.colorStops[0].color : params[i].color
                    const marker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' + color + '"></span>'
                    relVal += '<br/>' + marker + params[i].seriesName + ' : ' + params[i].value + name1
                }
                return relVal
            }
        },
        toolbox: {
            show: false,
            right: '3%',
            feature: {
                // dataView: { readOnly: true },//修改数据
                magicType: { type: ['line', 'bar'] }, //切换柱状图和折线图
                // restore: {},//刷新按钮
                saveAsImage: {} //下载图片
            }
        },
        title: {
            show: showTitle,
            text: title,
            left: 'center',
            top: 10,
            textStyle:{
                fontSize:14
            }
        },
        label:{
         show:showLabel,
         position:'top',
         color:'#fff'
        },
        legend: {
            show: showLegend,
            type: legendType, // 设置图例为滚动类型scroll
            orient: 'horizontal', // 横向显示图例
            height: 50, // 设置图例高度
            pageIconColor: '#ccc', // 设置翻页箭头颜色
            pageTextStyle: {
                color: '#999' // 设置翻页数字颜色
            },
            pageIconSize: 14, // 设置翻页箭头大小
            textStyle: { // 设置图例文字的样式
                color: '#999',
                fontSize: 12
            },
            itemHeight: 14, // 设置图例项的高度
            itemWidth: 25, // 设置图例项的宽度
            width: legendWidth,
            itemGap: itemGap, //图例每项之间的间隔
            right: 20, // 设置图例右边距
            top: 20, // 设置图例上边距,
            pageButtonItemGap: 5, //翻页数字距离箭头的距离
            pageButtonPosition: 'end', //翻页按钮位置在图例右侧
        },
        grid: {
            left: 20,
            right: 30,
            bottom: 20,
            top:40,
            containLabel: true
        },
        xAxis: [{
            type: 'category',
            // boundaryGap: false,
            data: xAxisDatas,
            axisTick: {
                show: axisTickShow, //x轴刻度是否显示
                alignWithLabel: false //控制刻度点是否位于柱状图正中间
            },
            axisLabel: {
                interval: 0, //横轴信息全部显示  
                rotate: rotate, //-30度角倾斜显示  
                ...axisLabelOption
            },

        }],
        yAxis: [{
            name: name,
            type: 'value',
            position: 'left',
            max: maxVal + limit,
            min: minVal,
            interval: Math.ceil((maxVal + limit - minVal) / splitNum),
            ...yAxisParam
        }],
        series: seriesData,
        ...barOption
    }
    return option
}
// 仪表盘
export function gaugeEcharts({
    echartsData,
    colors = commonColor,
    axisLineStyleColor = [
        [0.3, '#37a2da'],
        [0.7, '#eaa509'],
        [0.8, '#fd666d'],
        [1, '#e5e6eb']
    ],
    title = '',
    radius = '90%',
    pointerColor = '#5470c6',
    progressWidth = 5,
    pointerWidth = 5,
    isProgress = false,
    axisLabelFontSize = 11,
    axisTickShow = true,
    splitLineLength = 5,
    gaugeOption = {},
    gaugeseries = {}
}) {
    const option = {
        tooltip: {
            formatter: '{a} <br/>{b} : {c}',
            position: ['50%', '0%'],
            // backgroundColor: 'rgba(135,206,235, 0.4)',
            // borderColor: 'rgba(0, 243, 230, 0.4)', // 边框颜色
        },
        title: {
            show: true,
            text: title,
            left: 'center',
            textStyle: {
                fontSize: '3%',
                color: 'black',
                lineHeight: 16
            },
            bottom: 0,
        },
        //   center: ["50%", "35%"],
        series: [{
            name: echartsData[0].name,
            type: 'gauge',
            silent: true, //控制是否出现手势图标
            progress: {
                show: isProgress,
                width: progressWidth,
                itemStyle: {
                    color: {
                        type: 'linear',
                        x: 0.8,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                                offset: 0,
                                color: colors[4] // 0% 处的颜色
                            },
                            {
                                offset: 0.25,
                                color: colors[3] // 25% 处的颜色
                            },
                            {
                                offset: 0.5,
                                color: colors[2] // 50% 处的颜色
                            },
                            {
                                offset: 0.75,
                                color: colors[1] // 75% 处的颜色
                            },
                            {
                                offset: 1,
                                color: colors[0] // 100% 处的颜色
                            }
                        ],
                        global: false
                    }
                }
                //   roundCap:true
            },
            detail: {
                show: false,
                valueAnimation: true, //标签数字动画
                formatter: function(value) {
                    return value.toFixed(2);
                },
                fontSize: '3%',
                color: '#fff',
                offsetCenter: [0, '70%'] //数字偏移
            },
            pointer: { //仪表盘指针
                length: '85%', //相对半径的长度
                width: pointerWidth,
                keepAspect: true,
                itemStyle: {
                    color: pointerColor
                }
            },
            radius: radius, //仪表盘半径
            axisLine: {
                //最外层圆圈线条
                lineStyle: {
                    show: true,
                    width: 10,
                    color: axisLineStyleColor
                        //color: [[1, '#02FEB9']]
                },
            },
            title: { show: false }, //控制data中的name值
            // min: 0,
            // max: 100,
            splitNumber: 10, //分割段数
            axisTick: {
                show: axisTickShow, //内圈刻度线隐藏小刻度
                distance: 2,
                lineStyle: {
                    color: '#e5e6eb',
                    width: 1
                }
            },
            splitLine: {
                //内圈分隔线大刻度
                show: true,
                distance: 2,
                length: splitLineLength,
                lineStyle: {
                    color: '#e5e6eb',
                    width: 2
                }
            },
            //刻度值
            axisLabel: {
                distance: 5,
                fontSize: axisLabelFontSize,
                // formatter: function(value) {
                //     return value.toFixed(1); // 刻度值后缀
                // }
            },
            //表盘中指针的固定点
            anchor: {
                show: true,
                showAbove: true,
                keepAspect: true,
                icon: 'circle',
                size: 10,
                itemStyle: {
                    borderWidth: 2, //圆圈大小
                    borderColor: pointerColor
                }
            },
            data: echartsData,
            ...gaugeseries
        }],
        ...gaugeOption
    }
    return option
}
/**
 * 折线图
 * @param echartsData 折线图传入data
 */
export function lineEcharts({ echartsData, colors = commonColor, showAreaStyle = true, showMarkPoint = true, xAxisDatas, xAxisInterval = 0, boundaryGap = true, gridLeft = '3%', gridRight = '3%', gridBottom = 40, showLegend = true, name = '单位: kW', name1 = 'kW', limit = 20, showDataZoom = false,yAxisParam = {},lineOption = {} }) {
    const seriesData = []
    echartsData.some((item, index) => {
        const param = {
            type: 'line',
            symbol: 'circle', //legend圆圈变实心
            showSymbol: false,
            symbolSize: 1,
            yAxisIndex: 0,
            lineStyle: {
                width: 2,
                color: colors[index]
            },
            label: {
                show: false
            },
            itemStyle: { //折线线条颜色
                color: colors[index],
                borderColor: '#FFFFFF',
                borderWidth: 2
            },
            areaStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0,
                        color: commonColor[index] // 0% 处的颜色
                    }, {
                        offset: 1,
                        color: commonColor[index] // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                },
                // color:'#38CFD4',
                opacity: 0.1,
                origin: 'start' //让负值时面积在线的下方
            },
            markPoint: { //标注最大最小值
                data: [
                    { type: 'max', name: 'Max' },
                    { type: 'min', name: 'Min' },
                ],
                label: {
                    formatter: '{b}: {c}',
                    position: 'top',
                },
                symbol: 'circle',
                symbolSize: 10,
            },
            data: item.data,
            name: item.name
        }
        if (!showAreaStyle) {
            delete param.areaStyle
        }
        if (!showMarkPoint) {
            delete param.markPoint
        }
        seriesData.push(param)
    })
    const option = {
        tooltip: { //悬浮标签
            trigger: 'axis',
            backgroundColor: 'rgba(0,0,0, 0.7)',
            borderColor: 'rgba(0, 243, 230, 0.7)', // 边框颜色
            axisPointer: {
                type: 'cross',
                axis: 'x',
                snap: true,
                label: {
                    backgroundColor: 'rgba(0, 0, 0, 0.5)'
                }
            },
            textStyle: {
                color: comTextColor,
                fontStyle: 'normal',
                fontFamily: '微软雅黑',
                fontSize: 14
            },
            formatter: (params) => {
                var relVal = params[0].name

                for (var i = 0; i < params.length; i++) {
                    const color = params[i].color
                    const marker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' + color + '"></span>'
                    relVal += '<br/>' + marker + params[i].seriesName + ' : ' + params[i].value + name1
                }
                return relVal
            }
        },
        grid: { //容器四周的边距
            top: 40,
            right: gridRight,
            left: gridLeft,
            bottom: gridBottom,
            containLabel: true
        },
        legend: { //标签
            show: showLegend,
            top: 10,
            right: 40,
            itemGap: 6,
            itemWidth: 8,
            orient: 'horizontal',
            textStyle: {
                color: comTextColor,
                fontSize: 12
            }
        },
        xAxis: [{
            type: 'category',
            axisLabel: {
                color: comTextColor,
                interval: xAxisInterval, // 设置数据间隔
                // rotate:38,
                formatter(value, index) {
                    if (value.indexOf(' ') > -1) {
                        return value.split(' ')[1]
                    } else {
                        return value
                    }
                }
            },

            axisLine: {
                show: true,
                lineStyle: {
                    color: comTextColor
                }
            },
            axisTick: {
                show: true
            },
            splitLine: {
                show: false,
                lineStyle: {
                    color: comTextColor,
                    type: 'dotted'
                }
            },
            boundaryGap: boundaryGap, //刻度值是否位于两个刻度中间
            data: xAxisDatas
        }],
        yAxis: [{
            name: name,
            type: 'value',
            position: 'left',
            min: function(value) {
                if (value.min > 100000) {
                    return Math.trunc(value.min / 100000) * 100000
                } else if (value.min > 10000) {
                    return Math.trunc(value.min / 10000) * 10000
                } else if (value.min > 1000) {
                    return Math.trunc(value.min / 1000) * 1000
                } else if (value.min > 100) {
                    return Math.trunc(value.min / 100) * 100
                } else if (value.min < -100000) {
                    return (Math.trunc(value.min / 100000) - 1) * 100000
                } else if (value.min < -10000) {
                    return (Math.trunc(value.min / 10000) - 1) * 10000
                } else if (value.min < -1000) {
                    return (Math.trunc(value.min / 1000) - 1) * 1000
                } else if (value.min < -100) {
                    return (Math.trunc(value.min / 100) - 1) * 100
                } else {
                    return value.min - limit
                }
            },
            // max: function(value) {
            //     return Math.ceil(value.max)
            // },
            nameTextStyle: {
                color: comTextColor,
                fontSize: 11
            },
            axisLine: { //y轴是否显示
                show: false,
                lineStyle: {
                    color: comTextColor
                }
            },
            axisTick: {
                show: false
            },
            splitLine: { //背景分割线
                show: true,
                lineStyle: {
                    color: '#e5e6eb',
                    type: 'dotted'
                }
            },
            axisLabel: {
                formatter: '{value}',
                textStyle: {
                    color: comTextColor
                }
            },
            ...yAxisParam
        }],
        dataZoom: [{ //设置底部滚动轴
            show: true,
            realtime: true,
            textStyle: {
                color: comTextColor
            },
            start: 20,
            end: 75
        }, {
            type: 'inside',
            start: 20,
            end: 75
        }],
        series: seriesData,
        ...lineOption
    }
    if (!showDataZoom) {
        delete option.dataZoom
    }
    return option
}
//风向风速折线图
export function arrowLineEcharts({ echartsData, colors = commonColor, xAxisDatas, xAxisInterval = 10, boundaryGap = true, gridLeft = '3%', gridRight = 45, gridBottom = 40, showLegend = true, name = '单位: m/s', name1 = 'm/s', limit = 20, showDataZoom = true }) {
    const seriesData = []
    echartsData.some((item, index) => {
        const param = {
            type: 'line',
            symbol: 'arrow',
            symbolSize: 16,
            lineStyle: {
                color: colors[index],
                width: 2,
                type: 'dashed'
            },
            itemStyle: {
                borderWidth: 2,
                borderColor: '#EE6666',
                color: 'yellow',
            },
            data: item.data.map(el => {
                if (el.symbolRotate > 348.7599999999 || el.symbolRotate < 11.25999999) {
                    return {
                        value: el.value,
                        // 使用箭头函数来返回一个对象，包含 symbolRotate 属性
                        symbolRotate: 360 - el.symbolRotate + 180,
                        direction: '北风'
                    }
                } else if (el.symbolRotate < 78.75999999) {
                    return {
                        value: el.value,
                        // 使用箭头函数来返回一个对象，包含 symbolRotate 属性
                        symbolRotate: 360 - el.symbolRotate + 180,
                        direction: '东北风'
                    }
                } else if (el.symbolRotate < 101.25999999) {
                    return {
                        value: el.value,
                        // 使用箭头函数来返回一个对象，包含 symbolRotate 属性
                        symbolRotate: 360 - el.symbolRotate + 180,
                        direction: '东风'
                    }
                } else if (el.symbolRotate < 168.75999999) {
                    return {
                        value: el.value,
                        // 使用箭头函数来返回一个对象，包含 symbolRotate 属性
                        symbolRotate: 360 - el.symbolRotate + 180,
                        direction: '东南风'
                    }
                } else if (el.symbolRotate < 191.25999999) {
                    return {
                        value: el.value,
                        // 使用箭头函数来返回一个对象，包含 symbolRotate 属性
                        symbolRotate: 360 - el.symbolRotate + 180,
                        direction: '南风'
                    }
                } else if (el.symbolRotate < 258.75999999) {
                    return {
                        value: el.value,
                        // 使用箭头函数来返回一个对象，包含 symbolRotate 属性
                        symbolRotate: 360 - el.symbolRotate + 180,
                        direction: '西南风'
                    }
                } else if (el.symbolRotate < 281.259999999) {
                    return {
                        value: el.value,
                        // 使用箭头函数来返回一个对象，包含 symbolRotate 属性
                        symbolRotate: 360 - el.symbolRotate + 180,
                        direction: '西风'
                    }
                } else {
                    return {
                        value: el.value,
                        // 使用箭头函数来返回一个对象，包含 symbolRotate 属性
                        symbolRotate: 360 - el.symbolRotate + 180,
                        direction: '西北风'
                    }
                }
            }),
            name: item.name
        }
        seriesData.push(param)
    })
    const option = {
        tooltip: { //悬浮标签
            trigger: 'axis',
            backgroundColor: 'rgba(0,0,0, 0.7)',
            borderColor: 'rgba(0, 243, 230, 0.7)', // 边框颜色
            axisPointer: {
                type: 'cross',
                axis: 'x',
                snap: true,
                label: {
                    backgroundColor: 'rgba(0, 0, 0, 0.5)'
                }
            },
            textStyle: {
                color: comTextColor,
                fontStyle: 'normal',
                fontFamily: '微软雅黑',
                fontSize: 14
            },
            formatter: (params) => {
                var relVal = params[0].name //数据名，类目名x轴的时刻值
                for (var i = 0; i < params.length; i++) {
                    const color = params[i].color //itemStyle数据项图形颜色
                    const marker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' + color + '"></span>'
                    const color1 = colors[0] //线条颜色
                    const marker1 = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' + color1 + '"></span>'
                    relVal += '<br/>' + marker1 + params[i].seriesName + ' : ' + params[i].value + name1 + '<br/>' + marker + '风向 : ' + params[i].data.direction
                }
                return relVal
            }
        },
        grid: { //容器四周的边距
            top: 40,
            right: gridRight,
            left: gridLeft,
            bottom: gridBottom,
            containLabel: true
        },
        legend: { //标签
            show: showLegend,
            top: 10,
            right: 40,
            itemGap: 6,
            itemWidth: 8,
            orient: 'horizontal',
            textStyle: {
                color: comTextColor,
                fontSize: 12
            }
        },
        xAxis: [{
            type: 'category',
            axisLabel: {
                color: comTextColor,
                interval: xAxisInterval, // 设置数据间隔
                // rotate:38,
                formatter(value, index) {
                    if (value.indexOf(' ') > -1) {
                        return value.split(' ')[1]
                    } else {
                        return value
                    }
                }
            },

            axisLine: {
                show: true,
                lineStyle: {
                    color: comTextColor
                }
            },
            axisTick: {
                show: true
            },
            splitLine: {
                show: false,
                lineStyle: {
                    color: comTextColor,
                    type: 'dotted'
                }
            },
            boundaryGap: boundaryGap, //刻度值是否位于两个刻度中间
            data: xAxisDatas
        }],
        yAxis: [{
            name: name,
            type: 'value',
            position: 'left',
            min: function(value) {
                if (value.min > 100000) {
                    return Math.trunc(value.min / 100000) * 100000
                } else if (value.min > 10000) {
                    return Math.trunc(value.min / 10000) * 10000
                } else if (value.min > 1000) {
                    return Math.trunc(value.min / 1000) * 1000
                } else if (value.min > 100) {
                    return Math.trunc(value.min / 100) * 100
                } else if (value.min < -100000) {
                    return (Math.trunc(value.min / 100000) - 1) * 100000
                } else if (value.min < -10000) {
                    return (Math.trunc(value.min / 10000) - 1) * 10000
                } else if (value.min < -1000) {
                    return (Math.trunc(value.min / 1000) - 1) * 1000
                } else if (value.min < -100) {
                    return (Math.trunc(value.min / 100) - 1) * 100
                } else {
                    return value.min - limit
                }
            },
            // max: function(value) {
            //     return Math.ceil(value.max)
            // },
            nameTextStyle: {
                color: comTextColor,
                fontSize: 11
            },
            axisLine: { //y轴是否显示
                show: false,
                lineStyle: {
                    color: comTextColor
                }
            },
            axisTick: {
                show: false
            },
            splitLine: { //背景分割线
                show: true,
                lineStyle: {
                    color: '#e5e6eb',
                    type: 'dotted'
                }
            },
            axisLabel: {
                formatter: '{value}',
                textStyle: {
                    color: comTextColor
                }
            }
        }],
        dataZoom: [{ //设置底部滚动轴
            show: true,
            realtime: true,
            textStyle: {
                color: comTextColor
            },
            start: 20,
            end: 75
        }, {
            type: 'inside',
            start: 20,
            end: 75
        }],
        series: seriesData
    }
    if (!showDataZoom) {
        delete option.dataZoom
    }
    return option
}
/**
 * 饼图
 * @param echartsData 传入data
 */
export function pieEcharts({ echartsData, center = '30%',showLegend=true,showToolTip=true, pieLegend = {}, colors = commonColor, pieTitle = '', valueTitle = '', formatterName = null, radius = ['45%', '65%'], legendType = 'scroll', legendWidth = 'auto',labelFontSize='3%',seriesParam={},pieOption={} }) {
    const option = {
        color: colors,
        title: [ //饼图标题
            {
                text: pieTitle,
                show: true,
                left: center,
                top: 'center',
                textAlign: 'center',
                textStyle: {
                    color: comTitleColor,
                    fontSize: 16
                }
            },
            {
                text: valueTitle,
                show: true,
                right: 10,
                top: 10,
                textStyle: {
                    color: comTitleColor,
                    fontSize: 18
                }
            }
        ],
        legend: {
            show: showLegend,
            top: 'middle',
            right: 0, //标签距离容器右侧的距离
            width: legendWidth,
            itemWidth: 5, // 设置图例项的宽度
            itemHeight: 40,
            itemGap: 10,
            orient: 'vertical',
            type: legendType,
            pageIconColor: '#999', // 设置翻页箭头颜色
            pageIconInactiveColor: '#ccc', //设置翻页到头无法翻页的颜色
            pageTextStyle: {
                color: '#999' // 设置翻页数字颜色
            },
            pageIconSize: 12, // 设置翻页箭头大小
            formatter: function(label) { //变量为图例名称 name
                const data = echartsData.filter(item => { return item.name === label })
                const labelValue = data[0].value
                return `{labelName|${label}}\n {labelValue|${labelValue}}` //右侧的值采用左侧的样式
            },
            pageIcons: { //更换上下箭头图标
                vertical: ['path://M481.834667 332.501333a42.666667 42.666667 0 0 1 57.621333-2.496l2.709333 2.496 298.666667 298.666667a42.666667 42.666667 0 0 1-57.621333 62.826667l-2.709334-2.496L512 423.04 243.498667 691.498667a42.666667 42.666667 0 0 1-57.621334 2.496l-2.709333-2.496a42.666667 42.666667 0 0 1-2.496-57.621334l2.496-2.709333 298.666667-298.666667z',
                    'path://M832.522014 372.467083c0 8.782014-3.235694 17.565051-9.708106 24.26873L535.638373 694.221158c-12.932544 13.408381-33.9226 13.408381-46.855144 0l-287.172465-297.485345c-12.9438-13.408381-12.9438-35.130102 0-48.538483 12.932544-13.408381 33.9226-13.408381 46.855144 0l263.744893 273.215592 263.747963-273.215592c12.932544-13.408381 33.9226-13.408381 46.855144 0C829.28632 354.902032 832.522014 363.68507 832.522014 372.467083z'
                ]
            },
            textStyle: {
                // color: '#fff',
                fontSize: 12,
                width: 180,
                height:35,
                overflow: 'break',
                rich: { //配合formatter使用
                    labelValue: {
                        padding: [10, 0, -15, -3] //legend 的value值距离上侧name值的距离
                    },
                    labelName: {
                        // color: comTitleColor
                    }
                }
            },
            ...pieLegend //通过传参个性化修改legend配置
        },

        tooltip: {
            show:showToolTip,
            confine: true, //是否将 tooltip 框限制在图表的区域内
            trigger: 'item',
            formatter: '{b} : {c} ({d}%)' //数据项的name value 百分比
        },
        series: [{
            type: 'pie',
            radius: radius, //数组值代表内 外半径大小
            center: [center, '50%'], //用于移动饼图位置，圆心坐标，第一项是相对于容器宽度，第二项是相对于容器高度
            data: echartsData,
            label: {
                show: true,
                color: 'black',
                fontSize: labelFontSize,
                lineHeight: 20,
                position: 'center', //设置标签相对饼图的位置
                formatter: formatterName //设置标签内容
            },
            labelLayout: {
                hideOverlap: false //缩放时是否隐藏重叠的标签，必须配置为false，否则会有文字长点的标签无法展示
            },
            labelLine: { //扇形外侧视觉引导线，当label中position设置为'outside'时生效
                show: false,
                lineStyle: {
                    type: 'solid'
                }
            },
            emphasis: { //高亮状态的扇区和标签样式
                label: { //圆圈中文字样式
                    show: false
                }
            },
            itemStyle: {
                borderRadius: 5, //每一块扇形的边缘弧度
                borderColor: '#fff',//扇形描边颜色
                borderWidth: 1 //每一块扇形的间隔距离,描边宽度
            },
            animationType: 'scale',
            animationEasing: 'elasticOut',
            animationDelay: function() { //选中扇形弹出效果延迟
                return Math.random() * 200
            },
            ...seriesParam
        }],
        ...pieOption
    }
    return option
}

/**
 * 气泡图
 * @param echartsData 气泡图传入data
 */
export function circleEcharts({ echartsData, colorList = commonColor }) {
    const size = [90, 80, 70, 60]
    const seriesData = []
    echartsData.some((item, index) => {
        const params = {
            name: item.name + item.value * 100 + '%' + '\n\n' + item.data + 'MW',
            value: item.value,
            symbolSize: size[index],
            draggable: true,
            itemStyle: {
                normal: {
                    shadowBlur: 10,
                    shadowColor: colorList[index],
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0,
                            color: colorList[index] // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: 'rgba(128,128,128,0.5)' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    }
                }
            }
        }
        seriesData.push(params)
    })
    const option = {
        backgroundColor: 'transparent',
        tooltip: {},
        animationDurationUpdate: function(idx) {
            // 越往后的数据延迟越大
            return idx * 100
        },
        grid: {
            left: 100,
            containLabel: true
        },
        animationEasingUpdate: 'bounceIn',
        color: ['#fff', '#fff', '#fff'],
        series: [{
            type: 'graph',
            layout: 'force',
            force: {
                repulsion: 90,
                edgeLength: 10,
                initLayout: [-500, 0]
            },
            roam: false,
            label: {
                show: true,
                fontSize: 8
            },
            data: seriesData
        }]
    }
    return option
}

/**
 * 水球图
 * @param echartsData 气泡图传入data  obj
 */
export function liquidFillEcharts({ echartsData, radius = '50%', amplitude = 5, itemStyleColor = '#4494fc' }) {
    const option = {
        series: [{
            type: 'liquidFill',
            amplitude: amplitude, // 波浪高度 水波的振幅大小
            data: [echartsData.value / 100, {
                value: echartsData.value / 100, // 图形数据写法二
                direction: 'left', // 水波运动方向
                itemStyle: {
                    color: itemStyleColor, // 水波颜色
                    opacity: 0.8, // 透明度
                },
                emphasis: {
                    itemStyle: {
                        color: itemStyleColor, // 鼠标移入时的水波颜色
                        opacity: 0.8, // 鼠标移入时的透明度
                    },
                },
            }], // 一个数据对应一条波纹 大小队形波纹的高度
            radius: radius, // 半径控制图形的大小
            center: ['50%', '50%'], // 图形的位置
            label: {
                normal: {
                    formatter: echartsData.value + '%',
                    textStyle: {
                        fontSize: 20, // 百分比字体的大小
                    },
                },
            },
            outline: {
                borderDistance: 1,
                itemStyle: {
                    borderWidth: 1, //  外圈的边框大小
                    borderColor: itemStyleColor, // 外圈的边框颜色
                    shadowBlur: 0, //阴影大小
                    shadowColor: itemStyleColor,
                },
            },
            // 水波图背景样式
            backgroundStyle: {
                color: 'white', // 波纹没有覆盖的部分颜色
                borderColor: '#fff', // 背景边框颜色，默认 none
                borderWidth: 0, // 内圈的边框
                shadowColor: 'none', // 背景阴影颜色，默认为无色
                shadowBlur: 0, // 背景阴影模糊大小，默认为0
            },
            waveAnimation: true, // 是否开启水波动画效果
            // 水波样式
            itemStyle: {
                color: itemStyleColor, // 水波的颜色
                shadowBlur: 1, // 水波阴影大小
                shadowColor: '#bfdbfe', // 阴影颜色         
                shadowOffsetX: 5, // 阴影水平偏移量
                shadowOffsetY: 10, // 阴影竖直偏移量
            },
            tooltip: {
                trigger: 'item'
            },
        }, ],
    }
    return option
}

// 圆形风向仪表盘
export function circleGaugeEcharts({
    echartsData,
    axisLineStyleColor = [
        [1, '#bfdbfe']
    ],
    title = '',
    showTitle = true,
    radius = '50%',
    outSideRadius = '80%',
    pointerOffsetCenter = [0, '15%'],
    pointerColor = '#4494fc',
    pointerWidth = '115%',
    axisLabelFontSize = 9,
    axisLabelDistance = -13,
    axisTickShow = false,
    splitLineLength = 3,
    axisLineWidth = 3,
    min = 0,
    max = 360,
    splitNumber = 8,
    labelWidth = 18,
    labelHeight = 18,
    labelSize = 14,
    gaugeOption = {},
    gaugeseries = {}
}) {
    const data = echartsData.map(item => {
        if (item.value > 348.7599999999 || item.value < 11.25999999) {
            if (item.value === 360 || item.value === 0) {
                return {
                    windDirection: '北风',
                    ...item,
                    value: 270
                }
            } else {
                return {
                    windDirection: '北风',
                    ...item,
                    value: item.value >= 90 ? item.value - 90 : item.value + 270
                }
            }
        } else if (item.value < 78.75999999) {
            return {
                windDirection: '东北风',
                ...item,
                value: item.value + 270
            }
        } else if (item.value < 101.25999999) {
            return {
                windDirection: '东风',
                ...item,
                value: item.value - 90
            }
        } else if (item.value < 168.75999999) {
            return {
                windDirection: '东南风',
                ...item,
                value: item.value - 90
            }
        } else if (item.value < 191.25999999) {
            return {
                windDirection: '南风',
                ...item,
                value: item.value - 90
            }
        } else if (item.value < 258.75999999) {
            return {
                windDirection: '西南风',
                ...item,
                value: item.value - 90
            }
        } else if (item.value < 281.259999999) {
            return {
                windDirection: '西风',
                ...item,
                value: item.value - 90
            }
        } else {
            return {
                windDirection: '西北风',
                ...item,
                value: item.value >= 90 ? item.value - 90 : item.value + 270
            }
        }
    })
    const option = {
        tooltip: {
            formatter: function name(params) {
                return params.name + ':' + params.data.windDirection
            },
            position: ['50%', '0%'],
        },
        title: {
            show: showTitle,
            text: title + data[0].windDirection,
            left: 'center',
            textStyle: {
                fontSize: 12,
                color: 'black',
                lineHeight: 16
            },
            bottom: 0
        },
        series: [{
            name: echartsData[0].name,
            type: 'gauge',
            center: ['50%', '45%'],
            silent: false,
            progress: {
                show: false,
            },
            detail: {
                show: false,
                valueAnimation: true, //标签数字动画
                formatter: function(value) {
                    return value.toFixed(2);
                },
                fontSize: 20,
                color: '#000',
                offsetCenter: [0, '70%'] //数字偏移
            },
            pointer: { //仪表盘指针
                length: '35%', //相对半径的长度
                offsetCenter: pointerOffsetCenter,
                icon: 'path://M47.516883816314404,-4.3860515832901L37.4709838163144,1.4139484167099L47.516883816314404,7.2139484167099L47.516883816314404,2.4139484167099L87.50378381631441,2.4139484167099L87.50378381631441,0.4139484167098999L47.516883816314404,0.4139484167098999L47.516883816314404,-4.3860515832901Z',
                width: pointerWidth,
                keepAspect: true,
                itemStyle: {
                    color: pointerColor
                }
            },
            radius: radius, //仪表盘半径
            axisLine: {
                //最外层圆圈线条
                lineStyle: {
                    show: true,
                    width: 2,
                    color: axisLineStyleColor
                        //color: [[1, '#02FEB9']]
                },
            },
            title: { //控制data中的name值
                show: false
            },
            startAngle: 90,
            endAngle: -269.99,
            min: min,
            max: max,
            splitNumber: splitNumber, //分割段数
            axisTick: {
                show: axisTickShow, //内圈刻度线隐藏小刻度
                distance: 2,
                lineStyle: {
                    color: '#e5e6eb',
                    width: 1
                }
            },
            splitLine: {
                //内圈分隔线大刻度
                show: false,
                distance: 2,
                length: splitLineLength,
                lineStyle: {
                    color: '#e5e6eb',
                    width: 2
                }
            },
            //刻度值
            axisLabel: {
                distance: axisLabelDistance,
                fontSize: axisLabelFontSize,
                color: '#4494fc',
                formatter: function(value) {
                    if (value / 90 === 0 && (echartsData[0].value === 0 || echartsData[0].value === 360)) {
                        return '{b|N}'
                    }
                    if (value / 90 === 1 && echartsData[0].value === 90) {
                        return '{b|E}'
                    }
                    if (value / 90 === 2 && echartsData[0].value === 180) {
                        return '{b|S}'
                    }
                    if (value / 90 === 3 && echartsData[0].value === 270) {
                        return '{b|W}'
                    }
                    if (value / 90 === 0) {
                        return '{a|N}'
                    }
                    if (value / 90 === 1) {
                        return '{a|E}'
                    }
                    if (value / 90 === 2) {
                        return '{a|S}'
                    }
                    if (value / 90 === 3) {
                        return '{a|W}'
                    }
                },
                rich: {
                    a: {
                        borderColor: '#bfdbfe',
                        borderWidth: 2,
                        borderRadius: 50,
                        width: labelWidth,
                        height: labelHeight,
                        align: 'center',
                        fontSize: labelSize,
                        color: '#bfdbfe',
                        backgroundColor: '#fff'
                    },
                    b: {
                        borderColor: '#4494fc',
                        borderWidth: 2,
                        borderRadius: 50,
                        width: labelWidth,
                        height: labelHeight,
                        align: 'center',
                        fontSize: labelSize,
                        color: '#4494fc',
                        backgroundColor: '#fff'
                    }
                }
            },
            //表盘中指针的固定点
            anchor: {
                show: false,
                showAbove: true,
                keepAspect: true,
                icon: 'circle',
                size: 10,
                itemStyle: {
                    borderWidth: 2, //圆圈大小
                    borderColor: pointerColor
                }
            },
            data: data,
            ...gaugeseries
        }, {
            type: 'gauge',
            center: ['50%', '45%'],
            min: 0,
            max: 360,
            startAngle: 90,
            endAngle: -269.99,
            splitNumber: 8,
            radius: outSideRadius,
            axisLine: {
                lineStyle: {
                    color: [
                        [1, '#87ceff']
                    ],
                    width: axisLineWidth
                }
            },
            axisTick: {
                show: false
            },
            splitLine: {
                //内圈分隔线大刻度
                show: true,
                distance: 0,
                length: splitLineLength,
                lineStyle: {
                    color: '#e5e6eb',
                    width: 2
                }
            },
            axisLabel: {
                show: false
            }
        }],
        ...gaugeOption
    }
    return option
}

//
//横行柱状图
export function acrossBarEcharts({ echartsData, colors = commonColor, showLegend = false, legendType = 'plain', legendWidth = 'auto', yAxisDatas, axisTickShow = true, rotate = 0, name = '(kWh)',name1='', maxVal = 120, minVal = 0, limit = 10, splitNum = 5,showTitle = false, title = '' }) {
    const seriesData = []
    echartsData.some((item, index) => {
        const param = {
            type: 'bar',
            barWidth: '70%',
            stack: item.stackName ? item.stackName : '', //是否堆叠，相同的stack堆叠 
            data: item.data.map((element, index1) => { //单独修改每个柱子的颜色
                return {
                    value: element,
                    itemStyle: {
                        color: colors[index1]
                    }
                }
            }),
            name: item.name
        }
        seriesData.push(param)
    })
    const option = {
        tooltip: { //悬浮标签
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },
            formatter: (params) => {
                var relVal = ''
                for (var i = 0; i < params.length; i++) {
                    let color = params[i].color
                    const marker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' + color + '"></span>'
                    relVal += marker + params[i].name + ' : ' + params[i].value + name1
                }
                return relVal
            }
        },
        toolbox: {
            show: false,
            right: '3%',
            feature: {
                // dataView: { readOnly: true },//修改数据
                magicType: { type: ['line', 'bar'] }, //切换柱状图和折线图
                // restore: {},//刷新按钮
                saveAsImage: {} //下载图片
            }
        },
        title: {
            show: showTitle,
            text: echartsData[0].name,
            right: 50,
            top: 0,
            textStyle:{
                fontSize:12,
                fontWeight:100
            }
        },
        legend: {
            show: showLegend,
            type: legendType, // 设置图例为滚动类型scroll
            orient: 'horizontal', // 横向显示图例
            height: 50, // 设置图例高度
            pageIconColor: '#ccc', // 设置翻页箭头颜色
            pageTextStyle: {
                color: '#999' // 设置翻页数字颜色
            },
            pageIconSize: 14, // 设置翻页箭头大小
            textStyle: { // 设置图例文字的样式
                color: '#999',
                fontSize: 12
            },
            itemHeight: 14, // 设置图例项的高度
            itemWidth: 25, // 设置图例项的宽度
            width: legendWidth,
            right: 20, // 设置图例右边距
            top: '1%', // 设置图例上边距,
            pageButtonItemGap: 5, //翻页数字距离箭头的距离
            pageButtonPosition: 'end', //翻页按钮位置在图例右侧
        },
        grid: {
            left: 60,
            right: 60,
            bottom: 20,
            top: '10 %'
                // containLabel: true
        },
        xAxis: [{
            type: 'value',
            name: name
                // max: maxVal + limit,
                // min: minVal,
                // interval: Math.ceil((maxVal + limit - minVal) / splitNum) 
        }],
        yAxis: [{
            type: 'category',
            position: 'left',
            data: yAxisDatas,
            axisTick: {
                show: axisTickShow, //x轴刻度是否显示
                alignWithLabel: false, //控制刻度点是否位于柱状图正中间
            },
            // boundaryGap: false,
            axisLabel: {
                // interval: 0, //横轴信息全部显示  
                // rotate: rotate, //-30度角倾斜显示  
                margin:4//刻度标签与轴线之间的距离
            }
        }],
        series: seriesData
    }
    return option
}

    // 封装潮流图echart配置
  export function flowEcharts({ echartsData,colors , maxX , maxY}) {
        const seriesData = []
        echartsData.some((item,index)=>{
          const param =   {
               type: "lines",
               polyline: false,
               coordinateSystem: "cartesian2d",
               lineStyle: {
                //  type: "dashed", // 线条类型
                 opacity: 1,
                 width: 2,
                 color: 'transparent',
               },
               effect: {
                 show: true,
                 trailLength: 0,// 特效存在时间长度
                 symbol: 'arrow', // 特效的形状
                 symbolSize: item.symbolSize, // 特效大小
                 loop: true, // 特效循环
                 // scale: 1.5, // 特效缩放
                 period:  item.period, // 特效速度
                 random: false, // 特效随机
                 color: colors[index], // 特效颜色
                 // brushType: 'both', // 特效覆盖类型
               },
               // animation: true, // 开启动画
               // animationDuration: 3000, // 动画时长
              //  symbol: ['circle', 'arrow'],
               symbolSize: 20,
               label: {
                 show: true,
                 position: "middle",
                 fontSize: 16,
                 color: '#08979C',
                 formatter: function (args) {
                   let val = args.data.name;
                   var strs = val.split("");
                   var str = "";
                   if (args.data.linkView) {
                     for (var i = 0, s; (s = strs[i++]);) {
                       str += s;
                       if (!(i % 15)) str += "\n";
                     }
                     return str;
                   }
                 },
               },
               data: item.data
             }
            seriesData.push(param)
        })
    
          var option = {
           xAxis: {
             min: 0,
             max: maxX,
             show: false,
             type: "value", 
           },
           yAxis: {
             min: maxY,
             max: 0,
             show: false,
             type: "value",
           },
           grid: {
             left: 0,
             right: 0,
             bottom: 0,
             top: 0
           },
           series: seriesData
    
         };
           return option
        }